<template>
	<template v-for="(item,index) in filterList" :key="index">
		<view class="card_wrapper" @click="goOrderTo(item.id)">
			<view class="card_header">
				<view class="card_info">
					<view class="card_title">
						{{item.productName}}
					</view>
					<view class="card_people_info">
						<p>成人票价：{{item.adultPrice}}元</p>
						<p>老人小孩票价：{{item.childPrice}}元</p>
					</view>
					<view class="card_dateTime">
						创建时间：{{item.createTime}}
					</view>
				</view>
				<view class="card_image">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="card_foot">
				<view class="card_foot-item">
					<span :style="{
							color: item.status == 0 ? '#eab906' : 
									 item.status == 1 ? 'skyblue' : 
									 item.status == 2 ? 'red' : 'green'
							}">
						{{ item.status == 0 ? '待付款' : item.status == 1 ? '待出行' : item.status == 2 ? '已取消' : '已完成' }}
					</span>
				</view>
				<view class="card_foot-item">
					<span @click.stop="onContract(item.id)">查看合同</span>
				</view>
			</view>
		</view>
	</template>
	<view v-if="dataList.length == 0" style="text-align: center;">
		暂无更多数据
	</view>
</template>

<script setup>
	import { watch, ref, onMounted } from 'vue';
	import { getOrderInfoList } from '@/api/order.js'
	import { useGlobalStore } from '@/stores/global.js'

	const store = useGlobalStore();
	// const props = defineProps(['pageNum','pageSize','status'])
	const props = defineProps(['status','dataList'])
	const filterList = ref([])

	// watch(
	// 	() => store.tripList,
	// 	(v1, v2) => {
	// 		dataList.value = store.tripList;
	// 		filterList.value = dataList.value;
	// 		console.log(dataList.value);
	// 	}, { immediate: true }
	// )
	
	watch(
		() => props.dataList,
		() => {
			console.log("watch",props.dataList);
			if (props.status !== 'null'){
				filterList.value = props.dataList.filter(item => item.status == props.status);
			}
			else filterList.value = props.dataList;		
		}, { immediate: true } 
	);


	// const dataList = ref([])

	// watch(
	// 	() => props.pageNum, 
	// 	(v1,v2) => {
	// 		//下拉下一页时更新dataList
	// 		getOrderList(v1);
	// 	},
	// 	{ immediate:true }
	// )

	// async function getOrderList(pageNum){
	// 	let {data} = await getOrderInfoList(pageNum, props.pageSize,props.status);
	// 	dataList.value = [...dataList.value, ...data.records];
	// 	store.setTotalPages(Math.ceil(data.total / props.pageSize));
	// }

	async function onContract(id) {
		uni.navigateTo({
			url: `/pages/trip/contract/contract?id=${id}`
		})
	}

	function goOrderTo(id) {
		uni.navigateTo({
			url: `/pages/trip/detail/orderInfo?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
	/* 卡片容器 */
	.card-container {
		margin: 20rpx;
	}

	.card_wrapper {
		background-color: #fff;
		border-radius: 16rpx;
		/* 圆角边框 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		/* 阴影效果 */
		overflow: hidden;
		/* 确保内容不超出圆角 */
		margin-top: 25rpx;
	}

	/* 卡片头部 - 左右布局 */
	.card_header {
		display: flex;
		flex-direction: row;
		padding: 0rpx;
	}

	/* 左侧信息区域 - 占55%宽度 */
	.card_info {
		flex: 0 0 55%;
		max-width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx;
	}

	.card_title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.card_people_info {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.card_dateTime {
		font-size: 24rpx;
		color: #999;
	}

	/* 右侧图片区域 - 占45%宽度 */
	.card_image {
		flex: 0 0 45%;
		max-width: 45%;
		height: 232rpx;
		/* 新增固定高度 */
		border-radius: 12rpx;
		overflow: hidden;
	}

	.card_image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片比例并填充容器 */
	}

	/* 卡片底部 - 两端对齐 */
	.card_foot {
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		align-items: center;
		padding: 20rpx 24rpx;
		border-top: 1rpx solid #eee;
		/* 顶部边框 */
	}

	.card_foot-item {
		font-size: 28rpx;
		color: #333;
	}

	.card_foot-item:last-child {
		color: #007AFF;
		/* 右侧文字蓝色 */
	}
</style>